<template>
  <div id="manage">
    <el-card style="height: calc(100vh - 110px);">
      <!-- 操作 -->
      <div class="operate">
        <div class="left">
          <el-button type="primary" @click="addGroup()" size="small">新建分组</el-button>
          <el-button type="primary" @click="addModel()" size="small">新建模型</el-button>
          <!-- <el-button plain size="small">导入</el-button>
        <el-button plain size="small">导出</el-button> -->
        </div>
        <div class="right" style="margin-right: 20px">
          <!-- <el-radio-group v-model="status" style="margin-right: 20px" size="small">
          <el-radio-button label="全部">全部</el-radio-button>
          <el-radio-button label="启用中">启用中</el-radio-button>
          <el-radio-button label="已停用">已停用</el-radio-button>
        </el-radio-group> -->
          <el-input placeholder="请输入名称，按下回车搜索" clearable v-model="modelName" size="small" suffix-icon="el-icon-search"
            style="width: 250px" @change="searchList()" />
        </div>
      </div>

      <!-- 模型 -->
      <div class="models" style="margin-top: 15px">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item v-for="item in data" :key="item.modelCategoryId" :name="item.modelCategoryId">
            <template slot="title">
              {{ item.categoryName + " ( " + item.cgModels.length + " )" }}
              <el-popover placement="bottom-start" trigger="click">
                <div class="popover_box" @click="AddNew(item.modelCategoryId)">
                  新增模型
                </div>
                <div class="popover_box" @click="EditGroup(item)">编辑分组</div>
                <div class="popover_box"
                  v-if="item.modelCategoryId != '1691271319926382594' && item.modelCategoryId != '1691271459928055809'"
                  @click="delGroup(item.modelCategoryId)">删除分组</div>
                <i slot="reference" style="
                  transform: rotate(90deg);
                  margin-left: 10px;
                  color: #9d9ba5;
                " @click.stop="visible = !visible" class="header-icon el-icon-more"></i>
              </el-popover>
            </template>
            <div class="item_box">
              <div class="item" v-for="ele in item.cgModels" :key="ele.modelId" @click="toModelDetail(ele.modelId)">
                <div class="icon_box">
                  <svg-icon :iconClass="ele.icon ? ele.icon : 'icon-question'"></svg-icon>
                </div>
                <div>
                  <p>{{ ele.modelName }}</p>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>


    <!-- 新建模型弹出框 -->
    <el-dialog width="40%" title="新建模型" :visible.sync="dialogFormVisible">
      <!-- 表单输入 -->
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="模型图标" prop="icon" label-width="100px">
          <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
            <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
            <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
              <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" style="width: 25px;" />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="名称" prop="modelName" label-width="100px">
          <el-input v-model="form.modelName" placeholder="请输入模型名称"></el-input>
        </el-form-item>
        <el-form-item label="所属分组" prop="modelCategoryId" label-width="100px">
          <el-select v-model="form.modelCategoryId" placeholder="请选择分组">
            <el-option v-for="item in data" :key="item.modelCategoryId" :label="item.categoryName"
              :value="item.modelCategoryId"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="是否启用" prop="isEnable" label-width="100px">
          <el-radio-group v-model="form.isEnable">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmAddModel('form')">提 交</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新建分组弹出框 -->
    <el-dialog width="40%" title="新建分组" :visible.sync="addGroupVisible">
      <el-form :model="groupForm" :rules="rules" ref="addGroupForm" label-width="100px">
        <el-form-item label="名称" prop="categoryName">
          <el-input v-model="groupForm.categoryName" placeholder="请输入分组名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="唯一标识" prop="modelUniqueIdentification">
          <el-input v-model="groupForm.modelUniqueIdentification" placeholder="请输入唯一标识"></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="是否内置" prop="isBulidIn">
          <el-radio-group v-model="groupForm.isBulidIn">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmAddGroup('addGroupForm')">提 交</el-button>
        <el-button @click="addGroupVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑分组弹出框 -->
    <el-dialog width="30%" title="编辑分组" :visible.sync="EditGroupVisible">
      <el-form :model="groupForm" :rules="rules" ref="EditGroupForm" label-width="100px">
        <el-form-item label="名称" prop="categoryName">
          <el-input v-model="groupForm.categoryName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="唯一标识" prop="modelUniqueIdentification">
          <el-input v-model="groupForm.modelUniqueIdentification" placeholder="请输入唯一标识"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="是否内置" prop="isBulidIn">
          <el-radio-group v-model="groupForm.isBulidIn">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmEditGroup('EditGroupForm')">提 交</el-button>
        <el-button @click="EditGroupVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IconSelect from "../../../components/IconSelect";
import {
  getModelCategoryList_Api,
  getAddModel_Api,
  getAddModelCategoryList_Api,
  getModelrList_Api,
  getEditModelCategoryList_Api,
  getModelSearch_Api,
} from "@/api/configuration/model";
export default {
  data() {
    return {
      modelName: "",
      EditGroupVisible: false, //编辑分组弹出框
      addGroupVisible: false, //新建分组弹出框
      status: "全部",
      activeNames: [1],
      //请求分组数据
      data: [],
      visible: false, //控制三个点的弹出框
      dialogFormVisible: false, //新建模型弹出框
      //新增模型表单
      form: {
        modelCategoryId: "", //模型分组Id
        isEnable: 1, //是否启用
        modelName: "", //名称
        modelCategoryName: "", //模型分组名称
        icon: "", //图标路径
      },
      //分组表单
      groupForm: {
        modelUniqueIdentification: "", //唯一标识，不可重
        categoryName: "", //分组名称
        // isBulidIn: 0, //是否内置\r\n0:不是\r\n1:是 不允许删除
      },
      //表单规则
      rules: {
        modelName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        isEnable: [
          { required: true, message: "请选择是否启用", trigger: "blur" },
        ],
        modelUniqueIdentification: [
          { required: true, message: "请输入唯一标识", trigger: "blur" },
        ],
        categoryName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        modelCategoryId: [
          { required: true, message: "请选择所属分组", trigger: "blur" },
        ],
        isEnable: [
          { required: true, message: "请选择是否启用", trigger: "blur" },
        ],
        isBulidIn: [
          { required: true, message: "请选择是否内置", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 选择图标
    selected(name) {
      this.form.icon = name;
    },
    //搜索
    async searchList() {
      let res = await getModelSearch_Api({ modelName: this.modelName });
      let { code, data } = res;
      if (code == 200) {
        this.data = data;
      }
    },
    //获取列表数据
    async getList() {
      let res = await getModelCategoryList_Api();
      let { code, data } = res;
      if (code == 200) {
        this.data = data;
        data.forEach(v => {
          this.activeNames.push(v.modelCategoryId)
        })
      }
    },
    //展开收缩列表
    handleChange(val) {
      // console.log(val);
    },
    //模组内模型新建
    AddNew(id) {
      this.dialogFormVisible = true;
      this.form = {
        modelCategoryId: id, //模型分组Id
        isEnable: 1, //是否启用
        modelName: "", //名称
        modelCategoryName: "", //模型分组名称
        icon: "", //图标路径
      };
    },
    //新建模型弹框
    addModel() {
      this.dialogFormVisible = true;
      this.form.isEnable = 1; //是否启用
      this.form.modelName = ""; //名称
      this.form.icon = ""; //图标路径
    },
    //确定新建模型
    confirmAddModel(formName) {
      this.data.forEach(item => {
        if (item.modelCategoryId == this.form.modelCategoryId) {
          this.form.modelCategoryName = item.categoryName
        }
      })
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getAddModel_Api(this.form);
          let { code, msg } = res;
          if (code == 200) {
            this.dialogFormVisible = false;
            this.$message.success(msg);
            this.getList();
          } else {
            this.dialogFormVisible = false;
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //新建分组弹框
    addGroup() {
      this.addGroupVisible = true;
      this.groupForm = {
        modelUniqueIdentification: Date.now(), //唯一标识，不可重
        categoryName: "", //分组名称
        // isBulidIn: 0, //是否内置\r\n0:不是\r\n1:是 不允许删除
      };
    },
    //确认新建分组
    confirmAddGroup(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getAddModelCategoryList_Api(this.groupForm);
          let { code, msg } = res;
          if (code == 200) {
            this.addGroupVisible = false;
            this.getList();
            this.$message.success(msg);
          } else {
            this.addGroupVisible = false;
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //编辑分组弹框
    EditGroup(item) {
      this.EditGroupVisible = true;
      this.groupForm = {
        modelCategoryId: item.modelCategoryId,
        categoryName: item.categoryName,
        isBulidIn: item.isBulidIn,
        modelUniqueIdentification: item.uniqueIdentification,
      };
    },
    //确认分组编辑
    confirmEditGroup(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getEditModelCategoryList_Api(this.groupForm);
          let { code, msg } = res;
          if (code == 200) {
            this.EditGroupVisible = false;
            this.$message.success(msg);
            this.getList();
          } else {
            this.EditGroupVisible = false;
            this.$message.error(msg);
          }
        } else {
          return false;
        }
      });
    },
    //删除分组
    delGroup(id) {
      this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await getModelrList_Api(id);
        let { code, msg } = res;
        if (code == 200) {
          this.$message.success(msg);
          this.getList();
        } else {
          this.$message.error(msg);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //携带模型id，跳转模型详情页面
    toModelDetail(id) {
      this.$router.push({
        path: "/configuration/model/modelDetail?id=" + id,
      });
    },
  },
  components: {
    IconSelect,
  },
};
</script>

<style lang="scss" scoped>
#manage {
  .operate {
    display: flex;
    justify-content: space-between;
  }

  .models {
    height: calc(100vh - 170px);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    overflow-y: scroll;
    background-color: #ffffff;

    .el-collapse {
      border: none !important;
    }

    .el-collapse-item {
      .item_box {
        width: 100%;
        box-sizing: border-box;
        padding: 2px;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;

        .item {
          width: 250px;
          height: 60px;
          margin-right: 10px;
          margin-bottom: 10px;
          border-radius: 8px;
          box-shadow: 1px 1px 4px 0px #d4cfcf;
          background-color: #ffffff;
          box-sizing: border-box;
          padding-left: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .icon_box {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e1ecff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
          }

          .name {
            p {
              margin: 0;
              margin-top: 8px;
              line-height: 10px;
              font-size: 13.5px;
            }

            span {
              font-size: 12px;
              color: #bfcbdf;
            }
          }
        }
      }
    }
  }

  //修改背景颜色
  ::v-deep .models .el-collapse .el-collapse-item .el-collapse-item__header {
    // background-color: transparent !important;
    border: none !important;
    font-weight: bold;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;

    &:hover {
      background-color: #f0f1f5;
    }
  }

  //修改背景颜色
  .models .el-collapse .el-collapse-item ::v-deep .el-collapse-item__wrap {
    // background-color: transparent !important;
    border: none !important;

    .el-collapse-item__content {
      padding-bottom: 0;
    }
  }
}

//弹出框
.popover_box {
  text-align: center;
  padding: 4px 0;
  cursor: pointer;

  &:hover {
    background-color: #f0f1f5;
    border-radius: 5px;
  }
}

//选择图标
#choose_Icon {
  width: 60px;
  height: 60px;
  border: 1px solid #d5dce2;
  border-radius: 50%;
  margin: -30px auto 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  &::after {
    content: "选择图标";
    position: absolute;
    bottom: -15px;
    left: 10px;
    font-size: 10px;
  }
}
</style>
